﻿<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <!-- Bootstrap 3.3.7 -->
    <link href="../../plugins/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
    <!-- Font Awesome -->
    <link rel="stylesheet" href="../../plugins/font-awesome/css/font-awesome.min.css">
    <!-- Ionicons -->
    <link href="../../plugins/Ionicons/css/ionicons.min.css" rel="stylesheet" />
    <!-- Theme style -->
    <link href="../../plugins/adminLTE/dist/css/AdminLTE.min.css" rel="stylesheet" />
    <!-- AdminLTE Skins. Choose a skin from the css/skins
         folder instead of downloading all of them to reduce the load. -->
    <link href="../../plugins/adminLTE/dist/css/skins/_all-skins.min.css" rel="stylesheet" />
    <!--TreeView-->
    <link href="../../plugins/bootstrap-treeview/dist/bootstrap-treeview.min.css" rel="stylesheet" />
</head>
<body class="hold-transition skin-blue sidebar-mini" style="background-color:#ecf0f5">
    <section class="content container-fluid">
        <div class="row">
            <div class="col-sm-6">
                <div class="box box-success">
                    <div class="box-body">

                        <div id="treeview1" class="treeview"></div>

                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="box">
                    <div class="box-body">
                        <p>JSON结构</p>
                        <code>
                            var tree = [
                            {
                            text: "Parent 1",
                            nodes: [
                            {
                            text: "Child 1",
                            nodes: [
                            {
                            text: "Grandchild 1"
                            },
                            {
                            text: "Grandchild 2"
                            }
                            ]
                            },
                            {
                            text: "Child 2"
                            }
                            ]
                            },
                            {
                            text: "Parent 2"
                            },
                            {
                            text: "Parent 3"
                            },
                            {
                            text: "Parent 4"
                            },
                            {
                            text: "Parent 5"
                            }
                            ];
                        </code>
                        <hr/>
                        <code>
                            {
                            text: "Node 1",
                            icon: "glyphicon glyphicon-stop",
                            selectedIcon: "glyphicon glyphicon-stop",
                            color: "#000000",
                            backColor: "#FFFFFF",
                            href: "#node-1",
                            selectable: true,
                            state: {
                            checked: true,
                            disabled: true,
                            expanded: true,
                            selected: true
                            },
                            tags: ['available'],
                            nodes: [
                            {},
                            ...
                            ]
                            }
                        </code>
                    </div>
                </div>
            </div>
        </div>

    </section>

    <!-- jQuery 3 -->
    <script src="../../plugins/jquery/dist/jquery.min.js"></script>
    <!-- Bootstrap 3.3.7 -->
    <script src="../../plugins/bootstrap/dist/js/bootstrap.min.js"></script>
    <!-- Slimscroll -->
    <script src="../../plugins/jquery-slimscroll/jquery.slimscroll.min.js"></script>
    <!-- FastClick -->
    <script src="../../../plugins/fastclick/lib/fastclick.js"></script>
    <!-- AdminLTE App -->
    <script src="../../../plugins/adminLTE/dist/js/adminlte.min.js"></script>
    <!--TreeView-->
    <script src="../plugins/bootstrap-treeview/dist/bootstrap-treeview.min.js"></script>
    <script type="text/javascript">
        $(function () {

            var defaultData = [
              {
                  text: 'Parent 1',
                  href: '#parent1',
                  tags: ['4'],
                  nodes: [
                    {
                        text: 'Child 1',
                        href: '#child1',
                        tags: ['2'],
                        nodes: [
                          {
                              text: 'Grandchild 1',
                              href: '#grandchild1',
                              tags: ['0']
                          },
                          {
                              text: 'Grandchild 2',
                              href: '#grandchild2',
                              tags: ['0']
                          }
                        ]
                    },
                    {
                        text: 'Child 2',
                        href: '#child2',
                        tags: ['0']
                    }
                  ]
              },
              {
                  text: 'Parent 2',
                  href: '#parent2',
                  tags: ['0']
              },
              {
                  text: 'Parent 3',
                  href: '#parent3',
                  tags: ['0']
              },
              {
                  text: 'Parent 4',
                  href: '#parent4',
                  tags: ['0']
              },
              {
                  text: 'Parent 5',
                  href: '#parent5',
                  tags: ['0']
              }
            ];

            var alternateData = [
              {
                  text: 'Parent 1',
                  tags: ['2'],
                  nodes: [
                    {
                        text: 'Child 1',
                        tags: ['3'],
                        nodes: [
                          {
                              text: 'Grandchild 1',
                              tags: ['6']
                          },
                          {
                              text: 'Grandchild 2',
                              tags: ['3']
                          }
                        ]
                    },
                    {
                        text: 'Child 2',
                        tags: ['3']
                    }
                  ]
              },
              {
                  text: 'Parent 2',
                  tags: ['7']
              },
              {
                  text: 'Parent 3',
                  icon: 'glyphicon glyphicon-earphone',
                  href: '#demo',
                  tags: ['11']
              },
              {
                  text: 'Parent 4',
                  icon: 'glyphicon glyphicon-cloud-download',
                  href: '/demo.html',
                  tags: ['19'],
                  selected: true
              },
              {
                  text: 'Parent 5',
                  icon: 'glyphicon glyphicon-certificate',
                  color: 'pink',
                  backColor: 'red',
                  href: 'http://www.tesco.com',
                  tags: ['available', '0']
              }
            ];

            var json = '[' +
              '{' +
                '"text": "Parent 1",' +
                '"nodes": [' +
                  '{' +
                    '"text": "Child 1",' +
                    '"nodes": [' +
                      '{' +
                        '"text": "Grandchild 1"' +
                      '},' +
                      '{' +
                        '"text": "Grandchild 2"' +
                      '}' +
                    ']' +
                  '},' +
                  '{' +
                    '"text": "Child 2"' +
                  '}' +
                ']' +
              '},' +
              '{' +
                '"text": "Parent 2"' +
              '},' +
              '{' +
                '"text": "Parent 3"' +
              '},' +
              '{' +
                '"text": "Parent 4"' +
              '},' +
              '{' +
                '"text": "Parent 5"' +
              '}' +
            ']';


            $('#treeview1').treeview({
                data: defaultData
            });
        });
    </script>
</body>
</html>
